<template>
	<el-tabs v-model="activeName" type="border-card">
		<el-tab-pane label="服务设施" name="FacilityBaseConfig"></el-tab-pane>
		<el-tab-pane label="养老机构" name="orgBaseConfig"></el-tab-pane>
		<el-tab-pane label="养老服务运营单位" name="orgHomeBaseConfig"></el-tab-pane>
		<aplid-base-crud :key="activeName" :paramsObj="{isFilterProvider: 1}" v-bind="configObj[activeName]"></aplid-base-crud>
	</el-tabs>
</template>

<script setup lang="tsx">
const activeName = ref('FacilityBaseConfig')

const props = defineProps<{
	modelValue?: any
  list?:any
}>()
const emit = defineEmits(['update:modelValue', 'change'])

const FacilityBaseConfig = {
	api: {
		index: 'dpServiceFacility_page',
	},
	auth: {},
	rowKey: 'soleValue',
	tipLabel: 'soleValue',
	tableConfig: {
		stripe: true,
		border: true,
		resizable: true,
		columns: [
			{
				label: '选择',
				prop: 'checked',
				fixed: 'left',
				width: '80px',
				reserveSelection: true,
				render: ({ row }) => {
					return <el-checkbox vModel={multiSelectObj.value[row.soleValue]} size="large" onChange={() => onSelectionChange(row, 'soleValue')} />
				},
			},
			{ label: '设施名称', prop: 'soleValue' },
			{ label: '运营单位', prop: 'unitName' },
			{ label: '负责人', prop: 'personName' },
			{ label: '负责人联系方式', prop: 'personTelephone', plusXing: '5,2' },
			{
				label: '设施类型',
				prop: 'typeLabel',
			},
			{
				label: '设施评定等级',
				prop: 'standardLabel',
			},
			{
				label: '营业状态',
				prop: 'stateLabel',
			},
		],
	},
}

const orgBaseConfig = {
	api: {
		index: 'view_dpServiceOrgBase_page',
	},
	auth: {},
	rowKey: 'creditCode',
	tableConfig: {
		stripe: true,
		border: true,
		resizable: true,
		columns: [
			{
				label: '选择',
				prop: 'checked',
				fixed: 'left',
				width: '80px',
				reserveSelection: true,
				render: ({ row }) => {
					return <el-checkbox vModel={multiSelectObj.value[row.creditCode]} size="large" onChange={() => onSelectionChange(row, 'creditCode')} />
				},
			},
			{ label: '机构名称', prop: 'organizationName' },
			{
				label: '统一社会信用代码',
				prop: 'creditCode',
			},
			{ label: '联系人', prop: 'burdenUserName' },
			{ label: '联系方式', prop: 'burdenUserPhone' },
			{
				label: '机构类型',
				prop: 'organizationTypeLabel',
			},
			{
				label: '机构评定星级',
				prop: 'organizationLevelLabel',
			},
		],
	},
}

const orgHomeBaseConfig = {
	api: {
		index: 'dpServiceOrgHome_page',
	},
	auth: {},
	rowKey: 'uniqueValue',
	tableConfig: {
		stripe: true,
		border: true,
		resizable: true,
		columns: [
			{
				label: '选择',
				prop: 'checked',
				fixed: 'left',
				width: '80px',
				reserveSelection: true,
				render: ({ row }) => {
					return <el-checkbox vModel={multiSelectObj.value[row.uniqueValue]} size="large" onChange={() => onSelectionChange(row, 'uniqueValue')} />
				},
			},
			{ label: '组织名称', prop: 'orgHomeName' },
			{
				label: '统一社会信用代码',
				prop: 'creditCode',
			},
			{ label: '联系人', prop: 'contactUserName' },
			{ label: '联系方式', prop: 'contactUserPhone', plusXing: '5,2' },
			{
				label: '经营状态',
				prop: 'operateStatusLabel',
			},
			{
				label: '经营范围',
				prop: 'serviceScope',
			},
		],
	},
}

const configObj = {
	FacilityBaseConfig,
	orgBaseConfig,
	orgHomeBaseConfig,
}
const baseConfig = configObj[activeName.value]

const multiSelectObj = ref({})
const multiSelectList = ref([])
const onSelectionChange = (item, type) => {
	const indexKey = multiSelectList.value.findIndex((v) => v[type] == item[type])
	if (indexKey == -1) {
		multiSelectList.value.push({
			label: item.orgHomeName || item.soleValue || item.organizationName,
			value: item.id,
			type,
		})
	} else {
		multiSelectList.value.splice(indexKey, 1)
	}

	const data = Object.keys(multiSelectObj).forEach((key) => {
		if (multiSelectObj.value[key]) {
			return key
		}
	})
	emit('update:modelValue', data)
	emit('change', multiSelectList.value, data)
}

onMounted(()=> {
  multiSelectList.value = props.list?.map(item=> {
    multiSelectObj.value[item.value] = true 
    return item 
  })
})
</script>

<style scoped></style>
